<template>
  <a-drawer
    v-model:visible="innerVisible"
    class="sl-dialog sl-drawer sl-inside-drawer"
    :title="title"
    :mask="false"
    :class="[innerVisible ? 'w-auto md:!w-168 p-3' : 'py-3']"
    :get-container="getContainer"
    :style="{ position: 'absolute' }"
    :content-wrapper-style="{ position: 'static', borderRadius: '4px', overflow: 'hidden' }"
    :body-style="{ paddingBottom: 0 }"
  >
    <div v-for="el in data" :key="el.label" class="mb-4.5">
      <div class="text-color-secondary mb-2">
        {{ el.label }}
      </div>
      <div>
        <slot v-if="el.slotName" :name="el.slotName" :value="el.value"></slot>
        <span v-else class="text-color-main">{{ el.value || "--" }}</span>
      </div>
    </div>
    <template #footer>
      <div class="text-right">
        <a-button class="!text-xs sm:!text-base" type="primary" @click="innerVisible = false">
          {{ t("common.ok") }}
        </a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { DetailItem } from "/@/types/components";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    title: string;
    visible: boolean;
    data: DetailItem[];
    getContainer?: string;
  }>(),
  {
    getContainer: "#home-content",
  }
);
const emits = defineEmits(["update:visible"]);
const innerVisible = ref(false);
watch(
  () => props.visible,
  (v) => {
    innerVisible.value = v;
  }
);
watch(innerVisible, (v) => {
  emits("update:visible", v);
});
</script>
